<template>
  <div class="p-2">
    <div class="flex justify-end mb-2">
      <a-button type="primary" size="small" @click="handleAdd"><template #icon>
          <PlusOutlined />
        </template>
        新增联系人</a-button>
    </div>
    <List :grid="{ gutter: 16, xs: 3, sm: 3, md: 3, lg: 3, xl: 3, xxl: 3 }" :data-source="contactsList">
      <template #renderItem="{ item }">
        <ListItem>
          <Card>
            <div>
              <div class="flex items-start position-relative">
                <Image :width="64" :height="64"
                  src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                  fallback="" />
                <div class="flex flex-col ml-10px">
                  <p class="mb-6px font-size-4 fw-600">{{ item.contactName }}</p>
                  <span>{{ item.contactJob }}</span>
                </div>
                <div v-if="item.contactIsMain == 1" class="position-absolute right-0">
                  <a-button type="primary" size="small">主要</a-button>
                </div>
              </div>
              <div class="contact-info mb-8px">
                <div class="mt-8px">
                  <span class="inline-block w-64px mr-10px">联系电话</span>
                  <span>{{ item.contactTel }}</span>
                </div>
                <div class="mt-8px">
                  <span class="inline-block w-64px mr-10px">邮箱</span>
                  <span>{{ item.contactEmail }}</span>
                </div>
                <div class="mt-8px flex">
                  <span class="inline-block w-64px mr-10px">社交帐号</span>
                  <div class="flex flex-col" style="width: calc(100% - 74px)">
                    <div v-for="row in getCustomerSocialAccounts(item.contactSocialAccount)" :key="row.id"
                      class="flex items-center">
                      <span class="w-70px mr-10px inline-block">{{ getLabel(row.type) }}</span>
                      <span class="inline-block text-ellipsis overflow-hidden" style="width: calc(100% - 80px)"
                        :title="row.account">{{ row.account }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="flex justify-end">
                <Space>
                  <a-button size="small" @click="handleEdit(item)">编辑</a-button>
                  <Popconfirm title="确认删除该联系人吗?" @confirm="handleDelete(item)">
                    <a-button danger size="small">删除</a-button>
                  </Popconfirm>
                  <!-- <a-button v-if="item.contactIsMain != 1" size="small" disabled>设为主要</a-button> -->
                </Space>
              </div>
            </div>
          </Card>
        </ListItem>
      </template>
    </List>
    <ContactDrawer @register="registerDrawer" @reload="getContact" />
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { List, Card, Image, Space, Popconfirm } from 'ant-design-vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import ContactDrawer from './ContactDrawer.vue';
import { useDrawer } from '@/components/Drawer';
import { getCustomerContact, delCustomerContact } from '@/api/customer';
import { getVendorContact, delVendorContact } from '@/api/vendor';
import { getDictOptions } from '@/utils/dict';
import { DictEnum } from '@/enums/dictEnum';
const props = defineProps({
  recordId: {
    type: String,
    default: '',
  },
  type: {
    type: String,
    default: 'customer',
  }
});
const ACCOUNT_TYPE = getDictOptions(DictEnum.ACCOUNT_TYPE);
const [registerDrawer, { openDrawer }] = useDrawer();
//列表
const ListItem = List.Item;
//数据
const contactsList = ref([]);

watch(
  () => props.recordId,
  (v) => {
    getContact();
  },
);
const getCustomerSocialAccounts = (contactSocialAccount) => {
  if (!contactSocialAccount) return [];
  return JSON.parse(contactSocialAccount);
};
const getLabel = (type) => {
  return ACCOUNT_TYPE.find((item) => item.value == type)?.label;
};
const getContact = async () => {
  const { rows } = props.type == 'customer' ? await getCustomerContact({ customerId: props.recordId }) : await getVendorContact({ vendorId: props.recordId });
  contactsList.value = rows.map((item) => {
    return {
      ...item,
      contactSex: item.contactSex.toString(),
    };
  });
};
//新增联系人
function handleAdd() {
  openDrawer(true, { update: false, recordId: props.recordId, type: props.type });
}
// 修改联系人
function handleEdit(record) {
  openDrawer(true, { update: true, record, recordId: props.recordId, type: props.type });
}
// 删除联系人
async function handleDelete(record) {
  props.type == 'customer' ? await delCustomerContact([record.contactId]) : await delVendorContact([record.contactId]);
  getContact();
}
</script>
<style lang="less" scoped>
:deep(.ant-list-item) {
  padding: 12px 0;
}

:deep(.ant-image) {
  .ant-image-img {
    border-radius: 50%;
  }
}
</style>
